<!--
 * @Descripttion: 聊天室
 * @Author: 银河以北
 * @Date: 2021-09-20 10:00:58
 * @LastEditors: 银河以北
 * @LastEditTime: 2021-10-07 14:01:06
-->
<template>
  <div class='app-container'>
    <div class='container'>
      <MenuList @changeChatStatus='changeChatStatus' />
      <ListContainer
        @getActiveChatItem="getActiveChatItem"
        :isChat='isChat'
        ref='ListContainerDom'
      />
      <ChatContainer
        :activeChatItem='activeChatItem'
        @changeNotRead='changeNotRead'
        @addNotRead='addNotRead'
        @updateGroupList='updateGroupList'
      />
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  ComponentInternalInstance,
  reactive,
  onMounted,
  ref,
} from "vue";

import MenuList from "./components/menu.vue"; //菜单组件
import ListContainer from "./components/listContainer.vue"; //聊天列表组件
import ChatContainer from "./components/chatContainer.vue"; // 聊天内容
export default defineComponent({
  components: {
    MenuList,
    ListContainer,
    ChatContainer,
  },

  setup() {
    //当前活动的聊天对象
    interface ChatItemData {
      id: number;
      user_id: number;
      send_id: number;
      send_nickname: string;
      type: string;
    }
    const activeChatItem: ChatItemData = reactive({
      id: 0,
      user_id: 0,
      send_id: 0,
      send_nickname: "未知用户",
      type: "chat",
    });

    //接收来自聊天列表的值
    const getActiveChatItem = (item: ChatItemData) => {
      activeChatItem.id = item.id;
      activeChatItem.user_id = item.user_id;
      activeChatItem.send_id = item.send_id;
      activeChatItem.send_nickname = item.send_nickname;
      activeChatItem.type = item.type;
    };

    // list组件
    type listType = InstanceType<typeof ListContainer>;
    const ListContainerDom = ref<listType | null>(null);

    //改变未读信息的数量
    const changeNotRead = (data: number) => {
      ListContainerDom.value?.changeNotRead(data);
    };

    //未读数量新增
    const addNotRead = (info: any) => {
      ListContainerDom.value?.addNotRead(info);
    };

    //判断是一对一还是群聊
    let isChat = ref<boolean>(true);

    //切换聊天方式
    const changeChatStatus = (status: string) => {
      if (status == "ChatDotRound") {
        isChat.value = true;
      }

      if (status == "ChatLineSquare") {
        isChat.value = false;
      }
    };

    //更新群组
    const updateGroupList = () => {
      ListContainerDom.value?.init();
    };

    return {
      //当前聊天活动对象
      activeChatItem,

      getActiveChatItem, //接收来自聊天列表的值

      changeNotRead, //改变未读信息的数量

      ListContainerDom, //list组件

      addNotRead, //未读信息新增

      changeChatStatus, //切换聊天方式

      isChat,

      updateGroupList, //更新群组
    };
  },
});
</script>
<style  lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../assets/img/login/login-bg.png");
  .container {
    width: 1200px;
    height: 550px;
    display: flex;
    justify-content: flex-start;
  }
}
</style>
